
import {createContext,FunctionComponent,useState,useContext, useEffect} from "react"
import { createDefaultState, loadContract } from "./utils"
import { ethers } from "ethers"

// export type Web3State={
//     ethereum?:MetaMaskInpageProvider|null,
//     provider?:providers.Web3Provider|null,
//     contract?:Contract
// }
const Web3Context=createContext<any>(createDefaultState())
const Web3Provider:FunctionComponent=({children})=>{
    const [web3Api,setWeb3Api]= useState<any>(createDefaultState())
    useEffect (()=>{
        async function initWeb3() {
            if (typeof window.ethereum !== 'undefined') {
              try {
                await window.ethereum.request({ method: 'eth_requestAccounts' })
                const provider = new ethers.providers.Web3Provider(window.ethereum as any)
                const contract=await loadContract("NftMarket",provider);
                setWeb3Api({
                  ethereum: window.ethereum,
                  provider,
                  contract,
                  isLoading: false
                })
                 
              } catch (err) {
                console.error('用户拒绝连接或发生错误:', err)
              }
            } else {
              console.warn('请安装 MetaMask 扩展')
            }
          }
          
        initWeb3();
    },[])
    return (
        <Web3Context.Provider value={web3Api}>
            {children}
        </Web3Context.Provider>
        //将 web3Api 状态通过 Web3Context.Provider 提供给其子组件。
        //所有放在 <Web3Provider> 包裹下的组件都可以访问 Web3 状态
    )
    
}
export function useWeb3(){
        return useContext(Web3Context) //自定义 Hook：useWeb3,用 useWeb3()
        // 任何组件都可以访问 Web3 状态，不用每次都写 useContext(Web3Context)。
    }
    export default Web3Provider;